<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>数据统计</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			#app {
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<div class="mm_top">
					<div class="doctor_left_title">
						<span class="doctor_left_title_border"></span>
						<span class="doctor_left_title_name">统计信息</span>
					</div>
				</div>
				<div class="doctor_box baseBox">
					<ul class="base_ul">
						<li>
							<span>患者总数</span
							><span style="font-size: 16px">{{detail.patientCount}}</span>
						</li>
						<li>
							<span>联网血糖仪</span
							><span style="font-size: 16px">{{detail.gluDeviceCount}}</span>
						</li>
						<li>
							<span>服务患者总数</span
							><span style="font-size: 16px"
								>{{detail.servingPatientCount}}</span
							>
						</li>
						<li>
							<span>血糖测量总数</span
							><span style="font-size: 16px">{{detail.sugarCount}}</span>
						</li>
					</ul>
				</div>
				<!-- <div class="doctor_left_title">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">服务统计</span>
				</div>
				<div class="doctor_box baseBox">
					<ul class="base_ul">
						<li>
							<span>逆糖管理</span
							><span style="font-size: 16px"
								>{{detail.patientReverseCount}}</span
							>
						</li>
						<li>
							<span>控糖管理</span
							><span style="font-size: 16px"
								>{{detail.patientControlCount}}</span
							>
						</li>
						<li>
							<span>御糖管理</span
							><span style="font-size: 16px"
								>{{detail.patientImperialCount}}</span
							>
						</li>
					</ul>
				</div> -->
				<div class="doctor_left_title">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">统计图表</span>
				</div>

				<div class="doctor_box baseBox">
					<van-tabs @click="handleClick" :ellipsis="false">
						<van-tab v-for="item in chartList" :title="item.title">
							<template v-if="item.data.length > 0"
								><pie :pie-data="item.data"
							/></template>
							<van-empty
								v-else
								image="img/blank_pic.png"
								description="暂无数据"
							>
							</van-empty>
						</van-tab>
					</van-tabs>
				</div>
				<div class="doctor_box baseBox">
					<van-tabs>
						<van-tab v-for="item in chartList2" :title="item.title">
							<template v-if="item.barData.length>0"
								><bar
									:key="item.key"
									:bar-data="item.barData"
									:bar-axis="item.barAxis"
								/>
							</template>
							<van-empty
								v-else
								image="img/blank_pic.png"
								description="暂无数据"
							>
							</van-empty>
						</van-tab>
					</van-tabs>
				</div>
				<div class="doctor_box baseBox" v-if="panes.length > 0">
					<van-tabs>
						<van-tab v-for="(item,index) in panes" :title="item.title">
							<template v-if="index == 0"
								><template v-if="item.barData.length >0"
									><bar
										:key="item.key"
										:bar-data="item.barData"
										:bar-axis="item.barAxis"
									/>
								</template>
								<van-empty
									v-else
									image="img/blank_pic.png"
									description="暂无数据"
								>
								</van-empty>
							</template>
							<template v-else>
								<template v-if="item.data.length > 0"
									><pie :key="item.key" :pie-data="item.data" />
								</template>
								<van-empty
									v-else
									image="img/blank_pic.png"
									description="暂无数据"
								>
								</van-empty>
							</template>
						</van-tab>
					</van-tabs>
				</div>

				<!-- <van-empty
					v-if="noopc==2"
					class="custom-image"
					image="img/blank_pic.png"
					description="暂未设置门诊服务"
				/> -->
			</div>
			<link-index></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<script src="./js/echarts.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
			getNow,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'
		import { pie, bar, uuid } from './js/charts-components.js'

		const PatientData = {
			data() {
				return {
					url: {
						getDetail: '/doctor/index/info',
						getLine: '/doctor/index/dynamic/info',
					},
					doctorId: '',
					detail: {
						patientCount: '',
						preDiabetesCount: '',
						diabetes2Count: '',
						sugarCount: '',
					},
					line: {
						todayCount: '',
						todayAbnormalCount: '',
					},
					chartList: [
						{
							title: '糖尿病类型',
							key: '1',
							data: [],
						},
						{
							title: '性别',
							key: '2',
							data: [],
						},
						{
							title: '年龄',
							key: '3',
							data: [],
						},
						{
							title: '糖龄',
							key: '4',
							data: [],
						},
						{
							title: '用药类型',
							key: '5',
							data: [],
						},
					],
					chartList2: [
						{
							title: '达标率统计',
							key: '1',
							barAxis: [],
							barData: [],
						},
						{
							title: '血糖异常分析',
							key: '2',
							barAxis: [],
							barData: [],
						},
					],
					panes: [],
					diabetesType: [],
					sex: [],
					age: [],
					sugarAge: [],
					drugType: [],
					serviceContent: '',
					mindate: new Date(2020, 0, 1),
					maxdate: new Date(2025, 0, 1),
					currentDate:
						new Date().getFullYear() +
						'年' +
						(Number(new Date().getMonth()) + 1) +
						'月',
					show: false,
					now: '',
					noopc: 1,
				}
			},
			created() {
				this.doctorId = url('?id')
				this.init()
			},
			methods: {
				async init() {
					await this.GetDetail()
					await this.GetLine()
				},
				handleClick(e) {
					this.chartList.forEach(v => {
						v.data = []
					})
					if (e == 1) {
						this.chartList[1].data = this.sex
					} else if (e == 2) {
						this.chartList[2].data = this.age
					} else if (e == 3) {
						this.chartList[3].data = this.sugarAge
					} else if (e == 4) {
						this.chartList[4].data = this.drugType
					} else {
						this.chartList[0].data = this.diabetesType
					}
				},
				GetDetail() {
					getAction(spliceUrl(this.url.getDetail), {
						doctorId: this.doctorId,
					}).then(res => {
						res = res.data
						if (res.success) {
							res.result && (this.detail = res.result)
							if (res.result) {
								res.result.diabetesType &&
									(this.diabetesType = res.result.diabetesType.map(v => {
										return {
											name: v.item,
											value: v.count,
										}
									}))
								res.result.sex &&
									(this.sex = res.result.sex.map(v => {
										return {
											name: v.item,
											value: v.count,
										}
									}))
								res.result.drugType &&
									(this.drugType = res.result.drugType.map(v => {
										return {
											name: v.item,
											value: v.count,
										}
									}))
								res.result.age &&
									(this.age = res.result.age.map(v => {
										return {
											name: v.item,
											value: v.count,
										}
									}))
								res.result.sugarAge &&
									(this.sugarAge = res.result.sugarAge.map(v => {
										return {
											name: v.item,
											value: v.count,
										}
									}))

								this.chartList[0].data = this.diabetesType
								res.result.panes &&
									(this.panes = res.result.panes.map(v => {
										return {
											title: v.groupName,
											key: v.dataId,
											data: v.data.map(n => {
												return {
													name: n.item,
													value: n.count,
												}
											}),
										}
									}))

								res.result.barChartData &&
									this.panes.unshift({
										title: '打卡率',
										key: '0',
										barAxis: res.result.barChartData.map(v => {
											return v.x
										}),
										barData: res.result.barChartData.map(v => {
											return v.y
										}),
									})
							}
						}
					})
				},
				GetLine() {
					getAction(spliceUrl(this.url.getLine), {
						doctorId: this.doctorId,
					}).then(res => {
						res = res.data
						if (res.success) {
							res.result && (this.line = res.result)
							if (res.result && res.result.sugarStatus) {
								this.chartList2[1].barAxis = res.result.sugarStatus.map(v => {
									return v.item
								})
								this.chartList2[1].barData = res.result.sugarStatus.map(v => {
									return v.count
								})
							}
							if (res.result && res.result.reachStandardRateBarChart) {
								this.chartList2[0].barAxis =
									res.result.reachStandardRateBarChart.map(v => {
										return v.x
									})
								this.chartList2[0].barData =
									res.result.reachStandardRateBarChart.map(v => {
										return v.y
									})
							}
						}
					})
				},
				formatter(type, val) {
					if (type === 'year') {
						return `${val}年`
					} else if (type === 'month') {
						return `${val}月`
					}
					return val
				},
				showPopup() {
					this.show = true
				},
				onchange(value) {
					this.currentDate =
						value.getFullYear() + '年' + (Number(value.getMonth()) + 1) + '月'
					this.currentDateValue =
						value.getFullYear() + '-' + (Number(value.getMonth()) + 1)
					console.log('111', this.currentDate)
				},
				linkToList(id) {
					window.location.href =
						'./opcList.html?id=' + this.doctorId + '&date=' + id
				},
			},
			components: {
				linkIndex: linkIndex,
				pie: pie,
				bar,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
